<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input[type=text]{width: 40px;}
    input[type=text][readonly]{width: 220px;}
  </style>
</head>
<body>
  <input type="text" class="year">
  <input type="text" class="month">
  <input type="text" class="date">
  <input type="button" class="btn" value="计算">
  <input type="text" class="result" readonly>
</body>
<script>
  var yearElement = document.querySelector(".year");
  var monthElement = document.querySelector(".month");
  var dateElement = document.querySelector(".date");
  var btnElement = document.querySelector(".btn");
  var resultElement = document.querySelector(".result");

  btnElement.onclick = function(){
    var y = yearElement.value - 0;
    var m = monthElement.value * 1;
    var d = dateElement.value / 1;

    var res = 0;

    // 2023.1.15
    // 当前天数
    // 2023.2.15
    // 将1月的天数+当前天数
    // 2023.3.15
    // 将1月的天数+2月的天数+当前天数
    // 2023.4.15
    // 将1月的天数+2月的天数+3月的天数+当前天数

    // 每次应该将当前月份之前的每个月的天数累加+当天天数

    // 利用switch的穿透特性，配合累加（+=）操作，在每个月份时，只累加前一个月份的天数，简化代码

    switch( m ){
      case 12: res += 30;
      case 11: res += 31;
      case 10: res += 30;
      case 9: res += 31;
      case 8: res += 31;
      case 7: res += 30;
      case 6: res += 31;
      case 5: res += 30;
      case 4: res += 31;
      case 3:
        if( y%4 === 0 && y%100 !== 0 || y%400 === 0 ){
          res += 29;
        }else{
          res += 28;
        }
      case 2: res += 31;
      case 1: res += d;
    }

    resultElement.value = y + "年" + m + "月" + d + "号是这一年的第" + res + "天";
  }


  
</script>
</html>